<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="js/vue.js"></script>
		<script src="js/elementui.js"></script>
		<link rel="stylesheet" type="text/css" href="css/index.css"/>
		<!--axios用向前端发送请求-->
		<script src="js/axios.min.js"></script>
		<script src="js/common.js"></script>
		<title>menu</title>
	</head>
	<body>
		<div id="box">
			<el-input v-model="selLabel" placeholder="请输入搜索菜单" style="width: 200px;"></el-input>
			<el-button type="primary" @click="initList">搜索</el-button>
			<el-button type="primary" @click="openAddMenu">添加主菜单</el-button>
			<template>
			  <el-table
			    :data="menuList"
			    height="280"
			    border
			    style="width: 100%">
			    <el-table-column
			      prop="id"
			      label="id"
			      width="50">
			    </el-table-column>
			    <el-table-column
			      prop="label"
			      label="label"
			      width="100">
			    </el-table-column>
			    <el-table-column
			      prop="href"
			      label="地址"
				  width="100">
			    </el-table-column>
				<el-table-column
				  prop="parentid"
				  label="父级id"
				  width="50">
				</el-table-column>
				<el-table-column
				  label="图标"
				  width="100">
				  <template slot-scope="scope" >
				  	<i :class="scope.row.imgicon"></i>
				  </template>	
				</el-table-column>
				<el-table-column label="操作" >
					<template slot-scope="scope" >
						<el-button type="success" size="mini" type="text" @click="openChild(scope.row.id)">添加子菜单</el-button>
						<el-button type="primary" size="mini" type="text" @click="openUpd(scope.row)">修改</el-button>
						<el-button type="danger" size="mini" @click="delMenu(scope.row.id)">删除</el-button>
					</template>	
				</el-table-column>
			  </el-table>
			  <el-pagination
			    background
			  	@prev-click="pageCode==0?pageCode:pageCode--"
			  	@next-click="pageCode++"
			  	@current-change="initList"
			    layout="prev, pager, next"
			  	:page-size="pageSize"
			  	:current-page="pageCode"
			    :total="total">
			  </el-pagination>
			</template>
			
			<el-dialog title="修改菜单信息" :visible.sync="dialogFormVisible">
			  <el-form :model="form">
			    <el-form-item label="label" >
			      <el-input v-model="form.label" autocomplete="off" style="width: 300px;"></el-input>
			    </el-form-item>
				<el-form-item label="href" >
				  <el-input v-model="form.href" autocomplete="off" style="width: 300px;"></el-input>
				</el-form-item>
			   <el-form-item label="parentid" >
			   	<el-input v-model="form.parentid" autocomplete="off" style="width: 300px;"></el-input>
			   </el-form-item>
			   <el-form-item label="imgicon" >
			   	<el-input v-model="form.imgicon" autocomplete="off" style="width: 300px;"></el-input>
			   </el-form-item>
			  </el-form>
			  <div slot="footer" class="dialog-footer">
			    <el-button @click="dialogFormVisible = false">取 消</el-button>
			    <el-button type="primary" @click="updMenu">确 定</el-button>
			  </div>
			</el-dialog>
			
			<el-dialog :title="title" :visible.sync="addChild">
			  <el-form :model="form2">
			    <el-form-item label="label" >
			      <el-input v-model="form2.label" autocomplete="off" style="width: 300px;"></el-input>
			    </el-form-item>
				<el-form-item label="href" >
				  <el-input v-model="form2.href" autocomplete="off" style="width: 300px;"></el-input>
				</el-form-item>
			   <el-form-item label="imgicon" >
			   	<el-input v-model="form2.imgicon" autocomplete="off" style="width: 300px;"></el-input>
			   </el-form-item>
			  </el-form>
			  <div slot="footer" class="dialog-footer">
			    <el-button @click="dialogFormVisible = false">取 消</el-button>
			    <el-button type="primary" @click="addMenu">确 定</el-button>
			  </div>
			</el-dialog>
			
		</div>	
	</body>
	<script>
		var box=new Vue({
			el:"#box",
			data:{
				title:"hh",
				addChild:false,
				dialogFormVisible: false,
				selLabel:"",
				total:0,
				pageSize:4,
				pageCode:1,
				form:{
					id:0,
					label:"",
					href:"",
					parentid:0,
					imgicon:""
				},
				form2:{
					id:0,
					label:"",
					href:"",
					parentid:0,
					imgicon:""
				},
				menuList:[]
			},
			methods: {
				initList() {
					axios.get(API+"allMenu?page="+this.pageCode+"&menuName="+this.selLabel).then(res=> {
							console.log(res.data)
							this.menuList=res.data.beanList
							this.total=res.data.totalCount
							this.pageCode=res.data.pageCode
						}).catch(err => {
						console.log(err)
					});
				},
				openUpd(menu){
					this.form=menu
					this.dialogFormVisible=true
				},
				updMenu(){
					axios.post(API+"updMenu",this.form).then(res=> {
							alert(res.data)
							this.dialogFormVisible=false
						}).catch(err => {
						console.log(err)
					});
				},
				delMenu(id){
					if(confirm("确认删除此菜单吗？")){
						axios.get(API+"delMenu?id="+id).then(res=> {
								alert(res.data)
								//this.dialogFormVisible=false
								this.initList()
							}).catch(err => {
							console.log(err)
						});
					}
				},
				openChild(id){
					this.addflag=false
					this.title="添加子菜单"
					this.form2.parentid=id
					this.addChild=true
				},
				openAddMenu(){
					this.addflag=true
					this.title="添加菜单"
					this.form2.parentid=0
					this.addChild=true
				},
				addMenu(){
					axios.post(API+"addMenu",this.form2).then(res=> {
							alert(res.data)
							this.addChild=false
							this.initList()
						}).catch(err => {
						console.log(err)
					});
				}
			},
			mounted() {
				this.initList()
			}
		})
	</script>
</html>